<template>
   <div>
    <h3>Vuex 使用</h3>
    <p>通过在store建立文件使用，也可以使用目录管理，一般有4部分state，getters，mutations，actions；the state as a function, and the getters, mutations and actions as objects</p>
    <ul>
      <li v-for="todo in todos" :key="todo.text">
        <input :checked="todo.done" @change="toggle(todo)" type="checkbox">
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
      </li>
      <li><input @keyup.enter="addTodo" placeholder="What needs to be done?"></li>
      <div>
        <h1>{{counter}}</h1>
        <button @click="addCounter">add</button>
      </div>
    </ul>
  </div>
  </template>
  
  <script>
  import { mapMutations } from 'vuex'
  
  export default {
    computed: {
      todos () {
        return this.$store.state.todos.list
      },
      counter() {
        return this.$store.state.counter;
      }
    },
    methods: {
      addTodo (e) {
        this.$store.commit('todos/add', e.target.value)
        e.target.value = ''
      },
      addCounter(e){
        this.$store.commit('increment')
      },
      ...mapMutations({
        toggle: 'todos/toggle'
      })
    }
  }
  </script>
  
  <style>
  .done {
    text-decoration: line-through;
  }
  </style>